<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<sfa:mainTitle></sfa:mainTitle>
		<%@ include file="/common/meta.jsp"%>
		<link rel="stylesheet" type="text/css" href="${path}/css/step/an.css" />


		<link rel="stylesheet" href="${path }/css/affixUpload.css"
			type="text/css"></link>

		<style type="text/css">
.pop {
	position: absolute;
	left:29.5%;
	top: 31%;
	width: 700px;
	height: 500px;
	background: #ffffff;
	border: 1px solid #ccc
}

.pop_head {
	position: relative;
	height: 20px;
	background: #ccc
}

.pop_head a {
	position: absolute;
	right: 8px;
	line-height: 20px;
	color: #000;
	text-decoration: none
}

.pop_head a:hover {
	color: #f60;
	text-decoration: none
}

.pop_body {
	padding: 8px
}

* {
	margin: 0;
	padding: 0;
}

.tc_box {
	width: 400px;
	height: 200px;
	border: 2px solid red;
	position: absolute;
	z-index: 2000;
	background: #FFC;
	display: none;
}

.sp_box {
	width: 100%;
	position: absolute;
	z-index: 1000;
	background: #000;
	top: 0;
	left: 0;
	display: none;
}

.main .formdiv {
	width: 400px;
}
</style>
		<script type="text/javascript">
var EX = {
	addEvent : function(k, v) {
		var me = this;
		if (me.addEventListener)
			me.addEventListener(k, v, false);
		else if (me.attachEvent)
			me.attachEvent("on" + k, v);
		else
			me["on" + k] = v;
	},
	removeEvent : function(k, v) {

		var me = this;
		if (me.removeEventListener)
			me.removeEventListener(k, v, false);
		else if (me.detachEvent)
			me.detachEvent("on" + k, v);
		else
			me["on" + k] = null;
	},
	stop : function(evt) {
		evt = evt || window.event;
		evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
	}
};
//document.getElementById('pop').onclick = EX.stop;
//document.getElementById('popsucceed').onclick = EX.stop;
var url = '#';
function show() {
	var o = document.getElementById('pop');
	o.style.display = "";
	setTimeout(function() {
		EX.addEvent.call(document, 'click', hide);
	});
}
function hide() {
	var o = document.getElementById('pop');
	o.style.display = "none";
	var t = document.getElementById('pops');
	t.style.display = "none";
	EX.removeEvent.call(document, 'click', hide);

}
function showsuccees() {
	var o = document.getElementById('pops');
	o.style.display = "";
	setTimeout(function() {
		EX.addEvent.call(document, 'click', hide);
	});
}
$(function() {
	var number = null;	
	var validdate="";
	var succeed =null;
	var succeedsize ="";
	$("#clear").click(function() {
		$(".inputbox").val("");
		$(".areabox").val("");
	});
	$("#next").click(function() {
		var url = "${path}/sms/index/validate";
		var smscontext = $("#smscontext").val();
		validdate = $("#validdatetime").val();
		//alert(validdate);
		var param = {
			"smscontext" : smscontext,
			"validdatetime":validdate,
		};
		$.post(url, param, function(data) {		
			var json =eval(data);
			//alert(json);
			if (json.result ==true) {
				$("#step1").css("display", "none");
				$("#step2").css("display", "block");			
				$("#firstStep").attr("class", "");
				$("#firstStep_line").attr("class","line_last");
				$("#secondStep").attr("class","now");
				$("#secondStep_line").attr("class","line_frist");
				var filterContext = json.filterContext;
				$(".smscontext").html(filterContext);
			} else {
				$(".context").html(json.context);
				$(".timecontext").html(json.timecontext);
				art.dialog( {
										icon : "error",
										content : "输入的内容不能为空",
										lock : true,
										ok : true
									});
			}
		});
	
	});	
	$("#provi").click(function() {
				$("#step2").css("display", "none");
				$("#step1").css("display", "block");			
				$("#firstStep").attr("class", "now");
				$("#firstStep_line").attr("class","line_frist");
				$("#secondStep").attr("class","");
				$("#secondStep_line").attr("class","line");		
		
	});
	$("#backup").click(function() {		
				$("#step3").css("display", "none");
				$("#step2").css("display", "block");				
				$("#secondStep").attr("class", "now");
				$("#secondStep_line").attr("class","line_frist");
				$("#thirdStep").attr("class","");
				$("#thirdStep_line").attr("class","line_end");		
		
	});
	$("#send").click(function() {			
			var url = "${path}/sms/index/validateno";
			var recvmobileno = $("#recvmobileno").val();		
			var param = {
				"recvmobileno" : recvmobileno,
			};
			
			var errorTag = false;
			var recvmobile = recvmobileno.split("\n");
			//alert(recvmobile);
			
			var Regx = /^\d+$/;
			if(recvmobile==""){
				art.dialog( {
				icon : "error",
				content : "你输入的不能为空!",
				lock : true,
				ok : true
				});
				return false;
			}else{
			for( i = 0; i < recvmobile.length;i++){
				if(Regx.test(recvmobile[i])){
					errorTag = false
				}else{
					errorTag = true;
					break;
				}
			}
			if (errorTag) {
			art.dialog( {
			icon : "error",
			content : "你输入的格式不对!",
			lock : true,
			ok : true
			});
			} else {
			$.post(url, param, function(data) {		
			var json =eval(data);
			if (json.result ==true) {
				$("#step3").css("display", "block");
				$("#step2").css("display", "none");
							
				$("#firstStep_line").attr("class","line");
				$("#secondStep").attr("class", "");
				$("#secondStep_line").attr("class","line_last");
				$("#thirdStep").attr("class","now");
				$("#thirdStep_line").attr("class","line_over");
				//debugger;
				succeed  = json.succeed;
				var failsize  = json.failsize;
				var fail  = json.fail;
				//alert(succeedsize);
				var succeedcut = json.succeedcut;
				var succeedback = json.succeedback;
				number = json.number;
				//document.getElementById("succeedsize").innerText = succeedsize;		
				//alert(number);
				$(".pop_body").html(""+succeed);
				$(".pop_fail").html(""+fail);
				$(".failsize").html(""+failsize);
				$(".number").html(""+number);

				if(number > 10 ){
					$("#last10").show();
					$("#back").show();
				
					$(".succeedcut").html(""+succeedcut);
					$(".succeedback").html(""+succeedback);
				}else{
					$("#succeedcut").html(""+succeedcut);
					$("#succeed").html(""+succeed);
					$("#back").html(""+succeed);
				}		
			} else {
				$(".recvmobileno").html(json.recvmobileno);
				
			}
		});
		}
}
	});
	$("#submit").click(
			function() {
			
			var context = $("#smscontext").val();
			
			var numbers = number;
			
			var sendsucceed = '"'+succeed+'"';
			//alert(numbers);
			var validdatetimes = '"'+validdate+'"';	
			url = "${path}/sms/index/onetomore";
			var param = {
					"context" : context,
					"sendsucceed" : sendsucceed,
					"validdatetimes" : validdatetimes,
				};
			if(numbers == "0"){
			art.dialog( {
			icon : "error",
			content : "成功的至少一条!",
			lock : true,
			ok : true
			});	
				return false;
			}else{
			$.post(url, param, function(data) {
				window.location.href = "${path}/sms/index"
				
		});
	}
		});
});
var maxLen =64;
function checkMaxInput(obj) {
	var m = obj.value.length;
	 
	var j = 0;
	var remLen1 = document.getElementById("remLen1");
	var remLen2 = document.getElementById("remLen2");
	var remLen3 = document.getElementById("remLen3");
	var remLen4 = document.getElementById("remLen4");
	var remLen5 = document.getElementById("remLen5");

	for ( var i = 0; i < m; i++) {
		if (obj.value.charCodeAt(i) < 0 || obj.value.charCodeAt(i) > 161) {
			 
			if (i < 64) {
				j = j + 1;
			}
		}
	}
	if(m <64){
	remLen1.innerHTML = '[最大可输入';
	remLen2.innerHTML = maxLen;
	remLen3.innerHTML = '字，还可输入';
	remLen4.innerHTML = maxLen - m;
	remLen5.innerHTML = '字]';
	}else{
	remLen1.innerHTML = '[最大可输入';
	remLen2.innerHTML = maxLen;
	remLen3.innerHTML = '字，已超过';
	remLen4.innerHTML = m - maxLen ;
	remLen5.innerHTML = '字]';
	}
}

</script>
		<link rel="stylesheet" type="text/css"
			href="${path}/css/addnews/step1.css" id="step" />
	</head>
	<body id="master">
		<sfa:mainHeader></sfa:mainHeader>
		<div class="webpart3 contentarea">
			<div class="webpart-head">
				<div class="webpart-head-item">
					短信发送
				</div>
			</div>
			<div class="webpart-main">
				<div class="webpart-main-item" style="padding-top: 12px;">
					<div class="at_loc">
						<span class="now" style="width: 208px;" id="firstStep">录入短信内容</span>
						<span class="line_frist" id="firstStep_line"></span>
						<span style="width: 208px;" id="secondStep">拷贝,粘贴手机号码</span>
						<span class="line" id="secondStep_line"></span>
						<span style="width: 208px;" id="thirdStep">核对并发送</span>
						<span class="line_end" id="thirdStep_line"></span>
					</div>
					<div id="step1">
						<table wcellpadding="0" cellspacing="0" style="margin-top: 10px;">
							<tr>
								<td>
									录入短信的内容
								</td>
							</tr>
							<tr>
								<td>
									 
									<textarea rows="6" cols="40" name="smscontext"
										style="width: 400px; height: 200px;" id="smscontext"
										onkeydown="checkMaxInput(this)" onkeyup="checkMaxInput(this)"
										onblur="checkMaxInput(this)"></textarea>	
									<br>
									短信有效时间：
									<select id="validdatetime" name="validdatetime">
										<option value="5">5分钟</option>
										<option value="10">10分钟</option>
										<option value="20">20分钟</option>
										<option value="30">30分钟</option>
										<option value="60">60分钟</option>
										<option value="120">2小时</option>
										<option value="180">3小时</option>
										<option value="240">4小时</option>
										<option value="300">5小时</option>
										<option value="360">6小时</option>
										<option value="420">7小时</option>
										<option value="480">8小时</option>
										<option value="540">9小时</option>
										<option value="600">10小时</option>
									</select>
								 
									<br/>
									 说明: 
									<font color="red"> 
									短信有效时间即：当前系统时间加上所选
									时间内的短信有效.<br/>例如现在11:00你选的是5分钟
									那么在11:05这段时间短信有效，超过有效时间短信就不会被发送了。
									</font>
									
								 <br/>
									<font id="remLen1"></font>
									<font color=red id="remLen2"></font>
									<font id="remLen3"></font>
									<font color=red id="remLen4"></font>
									<font id="remLen5"></font>	 	
								</td>
							</tr>
							<tr>
								<td>
									<input type="button" class="linkbtn2" value="上一步"
										onclick="history.go(-1);" />
									<a id="next" href="javascript:" class="linkbtn"><span>下一步
									</span> </a>
								</td>
							</tr>
						</table>
					</div>
					<div id="step2" style="display: none;">
						<table cellpadding="0" cellspacing="0" style="margin-top: 10px;">
							<tr>
								<td>
									输入您要发送的手机号码
								</td>

								<td colspan="2" align="center">
									<b>发送说明 </b>
								</td>
							</tr>
							<tr>
								<td width="220" align="left">
									<textarea rows="6" cols="40" name="recvmobileno"
										id="recvmobileno" style="width: 220px; height: 200px;"></textarea>
									<br>
									<font color="red" class="recvmobileno"></font>
								</td>

								<td width="200" align="center">
									<img src="${path}/images/bg_example.png" />
								</td>
								<td>
									<div>
										说明1:
										<br />
										如果你是一个一个输入,
										<br />
										请每输入一个号码按一次回车
										<br />
										如果你是批量输入,请按照
										<br />

										如图所示的excle样式输入内容
										<br />
										然后复制内容到文本框
										
									</div>
								</td>
							</tr>
							<tr>
								<td style="margin-top: 5px;">
									<a id="provi" href="javascript:" class="linkbtn"><span>上一步
									</span> </a>
									<a id="send" href="javascript:" class="linkbtn"><span>下一步
									</span> </a>
								</td>
							</tr>
						</table>
					</div>
					<div id="step3" style="display: none;" style="margin-top: 10px;">
						<table cellpadding="0" cellspacing="0" style="margin-top: 10px;">
							<tr>
								<td>
									内容：
								</td>
							</tr>
							
							<tr>
								<td>
									<div id="smscontext" class="smscontext" 
									style="border: 1px solid #ccc; width 300px; height: 100px; word-wrap: break-word;">
									</div>
								</td>
							</tr>

							<tr>
								<td>
									<div id="frist10">号码的前10条：</div>
								
								</td>
							</tr>
							<tr>
								<td>
									<div id="succeed" class="succeedcut"
										style="border: 1px solid #ccc; width: 300px; height: 100px; word-wrap: break-word;">
									</div>
								</td>
							</tr>
							
							<tr >
								<td>
								<div id="last10" style="display: none;">
									号码的后10条：
								</div>	
								</td>
								
							</tr>
							<tr >
								<td>
									<div id="back" class="succeedback"
										style="border: 1px solid #ccc; width: 300px; height: 100px; word-wrap: break-word;display: none;" >
									</div>
								</td>
							</tr>
							
							<tr>
								<td id="qq">
									总不符合规矩的号码：
									<a href="javascript:void(0);" onclick="show()"><font
										color="red" class="failsize" ></font> </a>条
								</td>
							</tr>
							<tr>
								<td>
									总计可以发送短信条数：
									<a href="javascript:void(0);" onclick="showsuccees()"><font
										color="red" class="number"></font> </a>条
								</td>
							</tr>
							<tr>
								<td>
									<a id="backup" href="javascript:" class="linkbtn"><span>上一步
									</span> </a>

									<a id="submit" href="javascript:" class="linkbtn"><span>提交</span>
									</a>

								</td>
							</tr>
						</table>
					</div>
					<!-- -----不符合规则的条目--- -->
					<div id="pop" class="pop" style="display: none">
						<div class="webpart-head">
							<div class="webpart-head-item">
								不符合规则的条目
								<div class="tools-btn">
									<a href="javascript:void(0);" onclick="hide()">关闭</a>
								</div>
							</div>
						</div>
						<div class="pop_fail" style="wword-wrap: break-word;">
						</div>
					</div>
					<!-- -----符合规则的条目--- -->
					<div id="pops" class="pop" style="display: none">
						<div class="webpart-head">
							<div class="webpart-head-item">
								符合规则的条目
								<div class="tools-btn">
									<a href="javascript:void(0);" onclick="hide()">关闭</a>
								</div>
							</div>
						</div>
						<div class="pop_body" style="word-wrap: break-word;">
						</div>
					</div>
				</div>
				<div class="webpart-foot">
					<div class="webpart-foot-item">
					</div>
				</div>
			</div>
		</div>
		<sfa:mainFooter></sfa:mainFooter>
	</body>
</html>


